/* eslint-disable react/jsx-key */
import React from 'react'
import titleLogo from '@/assets/images/yinghua.png'
import '../index.scss'
import { message, Tooltip } from 'antd'
import { withRouter } from "react-router-dom"
import { addArticleLikeCount } from '@/api/article'
import Store from '../../../store/index'

interface IProps{
  parent?: any;
  articleList: any[];
  history?: any;
 }
interface IState{
  isLike: boolean;
}

class ArticleList extends React.Component<IProps,IState> {
  parent: any
  constructor(props) {
    super(props)
    this.state = {
      isLike: false
    }
  }
  static getDerivedStateFromProps(props, state) {
    console.log(state, props, 'props更新了')
    return true
  }
  componentDidMount() {
    this.parent = this.props.parent
  }
  async clickLike(item, index, month) {
    console.log(item)
    if (item.isLike) {
      message.error('你已经喜欢过了哦。。')
    } else {
      let obj = { ...this.props.articleList }
      console.log(obj)
      obj[month][index].isLike = true
      obj[month][index].likeCount = parseInt(obj[index].likeCount) + 1
      this.parent.updateArticleList(obj)
      const res = await addArticleLikeCount({
        articleId: item.id,
        userId: Store.userInfo.userId,
        userName: Store.userInfo.userName
      })
    }
  }
  toDetail(item) {
    this.props.history.push({ pathname: '/article/detail/' + item.id ,search:'title='+ item.title})
    console.log(item, this)
  }

  render() {
    return (
      <div className='articelList-page'>
        <div className='articleList' >
          {
            Object.keys(this.props.articleList).map((month, month_index) => {
              return (
                <div key={month}>
                  <div className='article-title' >
                    <div > <img src={titleLogo} alt='' className='titleLogo' /> </div>
                    <div className='article-time' > {month} </div>
                  </div>
                  {
                    this.props.articleList[month].map((item, index) => {
                      return (
                        <div className='list-item' key={index}>
                          <div className='content'>
                            <div className='list-left'><img src={item.imgUrl} alt='' className='list-img' /></div>
                            <div className='list-right'>
                              <div className='list-title' onClick={() => { this.toDetail(item) }}>
                                {item.title}
                              </div>
                              <div className='list-like'>
                                <span onClick={() => this.clickLike(item, index, month)}>
                                  {item.likeCount}&nbsp;<i className='iconfont icon-xihuan' style={item.isLike ? { color: 'red' } : {}}></i >
                                </span>
                                <span>/</span>
                                <span>
                                  {item.readCount} &nbsp;<i className='iconfont icon-liulan'></i>
                                </span>
                              </div>
                            </div>
                          </div>

                          <div className='time'>
                            {item.createTime}
                          </div>
                        </div>
                      )
                    })
                  }
                </div>

              )
            })
          }
        </div>
      </div>
    )
  }
}
export default withRouter(ArticleList)
